<template>
<div class="cert">
    <div :class="['cert-tip', statusClass]">
        {{ statusText }}
    </div>
    <form id="form" >
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <input class="weui-input" v-model="form.realname" type="text" required v-bind="{readonly: [1, 2].indexOf(check) !== -1}"  placeholder="您的姓名">
                </div>
            </div>

            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <input class="weui-input" v-model="form.id_card" type="text" required v-bind="{readonly: [1, 2].indexOf(check) !== -1}" placeholder="您的身份证号">
                </div>
            </div>
        </div>
        <div v-if="[-1, 0].indexOf(check) !== -1" class="cert-action">
            <a href="javascript:;" @click="handleSubmit" class="weui-btn weui-btn_primary">提交</a>
        </div>
    </form>
</div>
</template>

<script>
export default {
    data() {
        return {
            check: null, 
            form: {
                realname: null, // 姓名
                id_card: null, // 身份证
            }
        }
    },
    created() {
      this.getUserInfo()
    },
    methods: {
        handleSubmit() {
            let self = this;
            weui.form.validate('#form', function (error) {
                if (!error) {
                    var loading = weui.loading('提交中...');
                    axios.post('/member/personalCert', self.form).then(res => {
                        res = res.data
                        loading.hide();
                        if (res.status === 'success') {
                            weui.toast(res.message, 1000);
                            window.location.href = '/member/certification';
                        }else {
                            weui.alert(res.message);
                        }
                    }).catch(err => {
                         weui.alert(res.message);
                    })
                }
                // return true; // 当return true时，不会显示错误
            });
        },
        getUserInfo() {
            axios.get('/member/userInfo').then(res => {
                const data = res.data.data
                this.form.realname = data.realname
                this.form.id_card = data.idcard
                this.check = data.check
            }).catch(err => {
                console.log(err)
            })
        }
    },
    computed: {
        statusText() {
            switch (this.check) {
                case -1:
                    return '验证未通过'
                    break;
                
                case 0:
                    return '未验证'

                case 1:
                    return '正在审核'

                case 2:
                    return '已通过验证'

                default:
                    break;
            }

        },
        statusClass() {
            switch (this.check) {
                case -1:
                    return 'danger'
                    break;
                
                case 0:
                    return 'warning'

                case 1:
                    return 'warning'

                case 2:
                    return 'success'

                default:
                    break;
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.cert-tip {
    text-align: center;
    font-size: .42rem;
    color: #fff;
    padding: 0.1rem;
    &.success {
        background-color: #04a25c;
    }
    &.warning {
        background-color: #ffc107;
    }
    &.danger {
        background-color: #ff5722;
    }
}
</style>


